<template>
  <div class="foSi14" style="padding-top: 30px;">
    <div class="mar" style="width: 840px;">
      <div class="wid100 item-l item-p dis disAl disJuB hei44 mar-bott5">
        <div>短信套餐</div>
        <div>{{ message_num }}条短信套餐</div>
      </div>
      <div class="wid100 item-l item-p dis disAl disJuB hei44 mar-bott5">
        <div>原价(元)</div>
        <div style="color: #787878;text-decoration: line-through;">￥{{ old_price }}</div>
      </div>
      <div class="wid100 item-l item-p dis disAl disJuB hei44 mar-bott5">
        <div>实付(元)</div>
        <div style="color: #f49352;">￥{{ price }}</div>
      </div>
      <div class="wid100 item-l item-p dis disAl disJuB hei44 mar-bott5">
        <div>付款方式</div>
        <div class="dis disAl">
          <svg-icon
            icon-class="wechat"
            class="mar0"
            style="width: 20px;height: 20px;fill: green;color: green"
          />
          <span>微信</span>
        </div>
      </div>
      <div class="dis disAl disJuC mar-top30">
        <div class="que cuPo coFFF" style="background: #41c3a8;" @click.stop="createorder">去支付</div>
      </div>
      <div v-if="zhufu">
        <div class="dis disAl disJuB mar mar-top30" style="width: 408px;">
          <div class="qrcode-box">
            <img v-if="!payok" :src="pay_ewm" class="wh100">
            <div v-if="payok" style="text-align: center;color: green;line-height: 150px;font-size: 24px;">支付成功</div>
          </div>
          <div class="hei60 dis coFFF borRad5" style="padding: 15px 20px;width: 180px;background: #41c3a8;">
            <svg-icon icon-class="svg-scan" class="mar0" style="width: 30px;height: 30px;fill: #fff;" />
            <span class="mar-left10" style="line-height: 1.2;display: inline-block;">请使用微信扫码<br>二维码完成支付</span>
          </div>

        </div>

        <div
          class="mar-top20 textCen foSi13"
          style="color: #f5934b;"
        >请在3分钟内支付，支付成功前请勿离开此页面，可能存在延迟到账，延迟不会超过30秒</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getXuan,
  judgeButton
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import {
  CreateOrder,
  setmenu,
  getPayinfo
} from '@/api/sms'
export default {
  name: 'SmsBuy',
  components: {},
  data() {
    return {
      list: null,
      id: null,
      zhufu: false,
      price: '',
      message_num: '',
      old_price: '',
      pay_ewm: '',
      timer: null,
      payok: false

    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var query = this.$route.query
    this.id = query.id
    this.price = query.price
    this.message_num = query.message_num
    this.old_price = query.old_price
    var xuanList = [{
      name: '充值',
      url: '/sms2/smsBuy',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getList()
  },
  beforeDestroy() {
		    clearTimeout(this.timer)
  },
  methods: {
    createorder() {
      var that = this
      that.zhufu = true
      var data = {
        menuid: that.id
      }
      CreateOrder(data).then(response => {
        const {
          data
        } = response
        that.pay_ewm = data.payewm
        that.orderid = data.orderid
        that.timer = setInterval(function() {
          that.getPayinfo()
        }, 2000)
      }).catch(error => {
        console.log(error)
      })
    },
    getPayinfo() {
      var that = this
      var data = {
        orderid: that.orderid
      }
      getPayinfo(data).then(response => {
        const {
          data
        } = response
        if (data === 1) {
          that.$message.success('支付成功')
          clearTimeout(that.timer)
          that.payok = true
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getList() {
      this.list = []
    }
  }
}
</script>

<style lang="scss" scoped>
	.title {
		padding: 30px 0;
		color: #787878;
	}

	.list {
		float: left;
		width: 158px;
		height: 208px;
		padding: 15px;
		margin-right: 52px;
		margin-bottom: 30px;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		border: 4px solid #e6e6e6;
		border-radius: 2px;
		text-align: center;
	}

	.num {
		color: #41c3a8;
		font-size: 40px;
		height: 50px;
		overflow: hidden;
	}

	.text {
		color: #41c3a8;
	}

	.separator {
		height: 2px;
		background: #e3e3e3;
		margin: 15px 0 8px;
	}

	.price {
		color: #f49352;
		font-size: 16px;
	}

	.sms-buy {
		display: block;
		height: 40px;
		margin-top: 15px;
		background: #f49352;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 2px;
	}

	.qrcode-box {
		width: 176px;
		height: 176px;
		padding: 12px;
		background: #f4f4f7;
	}
</style>
